<template>
  <div class="toolbar-container">
    <div class="display-flex space-between width-100-p">
      <style-design />

      <div class="display-flex-column toolbar-tool">
        <div class="display-flex">
<!--          <my-button v-if="designProps.showPrintButton" size="small" class="toolbar-tool_button_margin_right"-->
<!--                     @click="openImportDialog">-->
<!--            <my-icon>-->
<!--              <ImportIcon />-->
<!--            </my-icon>-->
<!--            {{ i18n('toolbar.import') }}-->
<!--          </my-button>-->
<!--          <my-button v-if="designProps.showPrintButton" size="small" class="toolbar-tool_button_margin_right"-->
<!--                     @click="openExportDialog">-->
<!--            <my-icon>-->
<!--              <ExprotIcon />-->
<!--            </my-icon>-->
<!--            {{ i18n('toolbar.export') }}-->
<!--          </my-button>-->
<!--          <my-button v-if="designProps.showPrintButton" size="small" class="toolbar-tool_button_margin_right"-->
<!--                     @click="print">-->
<!--            <my-icon>-->
<!--              <Printer />-->
<!--            </my-icon>-->
<!--            {{ i18n('toolbar.print') }}-->
<!--          </my-button>-->
          <!--          <my-button v-if="designProps.showDownloadPdfButton" size="small"-->
          <!--                     class="toolbar-tool_button_margin_right"-->
          <!--                     @click="serverDownloadPdf">-->
          <!--            <my-icon>-->
          <!--              <Printer />-->
          <!--            </my-icon>-->
          <!--            {{ i18n('toolbar.download') }}-->
          <!--          </my-button>-->
          <my-button v-if="designProps.showPreviewButton" size="small"
                     class="toolbar-tool_button_margin_right" @click="preview">
            <i class="icon-zitiyulan iconfont" />
            {{ i18n('toolbar.preview') }}
          </my-button>
          <my-button v-if="designProps.showClearButton" size="small" class="toolbar-tool_button_margin_right"
                     @click="clearPanelClick">
            {{ i18n('toolbar.clear') }}
          </my-button>
<!--          <my-button v-if="designProps.showSaveButton" size="small" class="toolbar-tool_button_margin_right"-->
<!--                     :disabled="getCurrentPanel().name == null || getCurrentPanel().name == ''"-->
<!--                     @click="save">{{ i18n('toolbar.save') }}-->
<!--          </my-button>-->
        </div>
      </div>
    </div>
  </div>

  <!-- 导入弹窗 -->
  <el-dialog v-model="importDialogVisible"
             title="导入"
             width="600"
             :close-on-press-escape="false">
  </el-dialog>

  <!-- 导出弹窗 -->
  <el-dialog v-model="exportDialogVisible"
             title="导出"
             width="600"
             :close-on-press-escape="false">
    <el-button size="small" @click="exportPdf">导出为JSON文件</el-button>
    <el-button size="small" @click="exportPdf">导出为PDF</el-button>
  </el-dialog>

</template>

<script setup lang="ts">
import StyleDesign from './style-design.vue';
import { i18n } from '@myprint/design/locales';
import { clearPanel, defaultPreviewData, getCurrentPanel } from '@myprint/design/utils/elementUtil';
import { ActionEnum, record, Snapshot } from '@myprint/design/utils/historyUtil';
import { updatePanel } from '@myprint/design/plugins/moveable/moveable';
import { MyPrinter } from '@myprint/design/printer';
import { download, mitt } from '@myprint/design/utils/utils';
import MyButton from '@myprint/design/components/my/button/my-Button.vue';
import MyIcon from '@myprint/design/components/my/icon/my-icon.vue';
import Printer from '@myprint/design/components/my/icon/icons/Printer.vue';
import { MyMessage } from '@myprint/design/components/my/message/my-message';
//@ts-ignore
import { DesignPanelProps } from '@myprint/design/types/entity';
import { useAppStoreHook as appStore } from '@myprint/design/stores/app';
import ImportIcon from '@myprint/design/components/my/icon/icons/ImportIcon.vue';
import ExprotIcon from '@myprint/design/components/my/icon/icons/ExprotIcon.vue';

const useApp = appStore();
withDefaults(defineProps<{
  designProps: DesignPanelProps;
}>(), {});

const importDialogVisible = ref(false);
const exportDialogVisible = ref(false);

function openImportDialog() {
  importDialogVisible.value = true;
}

function openExportDialog() {
  exportDialogVisible.value = true;
}

function importTemplate() {
  MyPrinter.chromePreview({ previewDataList: defaultPreviewData(useApp.previewData) });
}

function print() {
  const defaultPrinter = MyPrinter.getDefaultPrinter();
  MyPrinter.clientPrinter({ previewDataList: defaultPreviewData(useApp.previewData), printer: defaultPrinter?.name })
    .then(res => {
      switch (res.status) {
        case 'SUCCESS':
          break;
        case 'TIMEOUT':
          MyMessage.error('打印超时');
          break;
        case 'ERROR':
          MyMessage.error('打印失败，' + res.msg);
          break;
      }
    }).catch(e => {
    MyMessage.error('打印失败，' + e.msg);
  });
}

function exportPdf() {
  MyPrinter.pdfServer({ previewDataList: defaultPreviewData(useApp.previewData) })
    .then(res => {
      switch (res.status) {
        case 'SUCCESS':
          download(res.blob!, 'myprint.pdf');
          break;
        case 'TIMEOUT':
          MyMessage.error('下载超时');
          break;
        case 'ERROR':
          MyMessage.error('下载失败，' + res.msg);
          break;
      }
    }).catch(e => {
    MyMessage.error('下载失败，' + e.msg);
  });
}

function preview() {
  MyPrinter.chromePreview({ previewDataList: defaultPreviewData(useApp.previewData) });
}

// function save() {
//   mitt.emit('saveTemplate', {} as any);
// }

function clearPanelClick() {
  clearPanel(getCurrentPanel());
  updatePanel();
  record(<Snapshot>{
    action: ActionEnum.CLEAR
  });
}
</script>
